var stats = new Stats();
//     sts = stats.domElement.style;
// sts.position = 'absolute';
// sts.top = '0px';
// sts.right = '0px';
// document.body.appendChild(stats.domElement);

var c = document.getElementById('c'),
    ctx = c.getContext('2d');

c.width = window.innerWidth * window.devicePixelRatio;
c.height = window.innerHeight * window.devicePixelRatio;

var circle = {
    r: 30,
    x: c.width / 2,
    y: c.height / 2,
    //此时速度准确的表达为：每帧6/4像素，完全依靠帧驱动
    //对于复杂应用来说，不同电脑每秒帧速率（fps）不同，如果仍然基于帧运动，那么移动相同距离，性能越好越先完成，这肯定不是我们想要的结果。
    vx: 6,
    vy: 4,
    pxPerS: 200,
    update: function(fps) {
        //此时基于帧速率（时间），计算此时一帧的移动像素数，以保证不论性能好坏，每秒移动像素数固定
        /**
         * 计算公式： vx/vy = 像素/秒 * 1/FPS
         */
        if(!fps && (fps = 60));
        this.vy = this.vy > 0 ? this.pxPerS / fps : -1 * this.pxPerS / fps;
        this.vx = this.vx > 0 ? this.pxPerS / fps : -1 * this.pxPerS / fps;
    
        if(this.x + this.r >= c.width) {
            this.vx *= -1;
        }
        if(this.x - this.r <= 0) {
            this.vx *= -1;
        }
        if(this.y + this.r >= c.height) {
            this.vy *= -1;
        }
        if(this.y - this.r <= 0) {
            this.vy *= -1;
        }
        this.x += this.vx;
        this.y += this.vy;
    },
    draw: function(ctx) {
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
}
console.log(circle);
(function loop() {
    ctx.fillStyle = '#ddd';
    ctx.fillRect(0, 0, c.width, c.height);
    requestAnimationFrame(loop);
    var fps = stats.update();
    circle.update(fps);
    circle.draw(ctx);
}());